<template>
  <div class="SongList">
    <div class="info">
      <img :src="data.coverImgUrl" alt="" />
      <div class="t1">
        <div class="name">{{ data.name }}</div>
        <div class="t2">
          <img class="author-img" :src="data.creator.avatarUrl" alt="" />
          <div class="nickname">{{ data.creator.nickname }}</div>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="desc">歌曲列表</div>
    </div>

    <div class="list" v-for="(item, index) in songlist" :key="item.id">
      <div class="code" :class="{ 'code-red': index < 3 }">
        {{ index > 8 ? index + 1 : "0" + (index + 1) }}
      </div>
      <div class="list-item" @click="selectItem(item)">
        <div class="left">
          <div class="subtitle">
            {{ item.name }} <span>{{ item.alia[0] }}</span>
          </div>
          <div class="author">
            <span v-for="ele in item.ar" :key="ele.id" class="ele"
              >{{ ele.name }}
            </span>
            - {{ item.al.name }}
          </div>
        </div>
        <div class="right"><img src="@/assets/bofang.png" alt="" /></div>
      </div>
    </div>
    <div class="content">
      <div class="desc">精彩评论</div>
    </div>
    <div class="pilu" v-for="item in hotComments" :key="item.id">
      <div class="pilu-img">
        <img :src="item.user.avatarUrl" alt="" />
      </div>
      <div class="pilu-neir">
        <div class="neir-name">{{item.user.nickname}}</div>
        <div class="neir-time">{{item.timeStr}}</div>
        <div class="neir">{{item.content}}</div>
        <div class="neir-dian">
          <span>2423435</span>
          <img src="@/assets/点赞.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        name: "", //标题
        coverImgUrl: "", //歌单图片
        creator: {
          nickname: "", //作者名字
          avatarUrl: "", //作者头像
        },
      },
      songlist: [],
      hotComments:[],
    };
  },
  created() {
    this.getData();
    this.getComment();
  },
  methods: {
    getData() {
      this.$request("get", "/playlist/detail", {
        id: this.$route.params.id,
      }).then((res) => {
        console.log(res);
        this.data.name = res.playlist.name;
        this.data.coverImgUrl = res.playlist.coverImgUrl;
        this.data.creator.nickname = res.playlist.creator.nickname;
        this.data.creator.avatarUrl = res.playlist.creator.avatarUrl;
        this.songlist = res.playlist.tracks;
      });
    },
    selectItem(item) {
      const id = item.id;
      console.log(id);
      this.$router.push({ path: `/song/${id}` });
    },
    getComment(){
      this.$request("get","/comment/playlist",{
        id:this.$route.params.id,
      }).then((res)=>{
        console.log("评论",res);
        this.hotComments=res.hotComments;
      })
    }
  },
};
</script>
<style  scoped >
.info {
  padding: 0.3rem;
  background: #eee;
  height: 150px;
  display: flex;
  align-items: center;
}
.info .t1 {
  height: 40px;
  margin-top: 115px;
  text-align: left;
}
.info .t1 .t2 {
  display: flex;
  align-items: center;
  text-align: left;
  margin-top: 10px;
}
.info img {
  width: 110px;
  margin-left: 10px;
}
.info .author-img {
  width: 30px;
  margin-left: 17px;
  border-radius: 50%;
}
.name {
  font-size: 12px;
  margin-left: 10px;
  margin-top: -93px;
  color: black;
  width: 300px;
}
.info .nickname {
  color: rgb(121, 113, 113);
  font-size: 8px;
  width: 100px;
  text-align: left;
  padding-left: 10px;
}

.content .desc {
  color: #888;
  font-size: 2px;
  background: #ddd;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: left;
}

.list {
  width: 100%;
  display: flex;
  text-align: left;
}
.list-item {
  border-bottom: 1px solid #eee;
  padding-left: 10px;
  width: 800px;
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex: 1px;
}
.list .code {
  width: 2rem;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.list .code-red {
  color: rgb(196, 49, 51);
}
.left {
  width: 16rem;
}
.right {
  width: 4rem;
}
.right img {
  width: 30px;
  float: right;
  margin-top: 5px;
}
.subtitle {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.author {
  margin-top: 4px;
  font-size: 12px;
  color: #888;
  text-overflow: ellipsis;
}
.author .span {
  margin-left: 5px;
}
.author img {
  margin-left: 3px;
  width: 15px;
}
.pilu {
  display: flex;
  padding-top: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eee;
  position: relative;
}
.pilu .pilu-img > img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: 10px;
}
.pilu .pilu-neir {
  text-align: left;
  padding-left: 10px;
  padding-right: 20px;
}
.pilu .pilu-neir .neir-name {
  font-size: 14px;
  color: #666;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pilu .pilu-neir .neir-time {
  font-size: 9px;
  color: #999;
}
.pilu .pilu-neir .neir {
  color: #333;
  font-size: 15px;
  line-height: 22px;
  margin-top: 5px;
}
.pilu .pilu-neir .neir-dian{
  display:flex;
  position: absolute;
  top: 10px;
  right: 10px;
}
.pilu .pilu-neir .neir-dian > img {
  width: 17px;
  height: 17px;
  padding-left: 4px;
}
.pilu .pilu-neir .neir-dian > span {
  line-height: 22px;
  font-size: 11px;
  color: #999;
}
</style>